@extends('admin::layouts.master')
@section('head')
    <link rel="stylesheet" href="{{asset('annos/News/Resources/views/assets/css/news.css')}}">
@endsection
@section('content')
    <div class="card" id="app">
        <div class="card-header">图文消息管理</div>
        <ul role="tablist" class="nav nav-tabs">
            <li class="nav-item"><a href="/news/news_reply" class="nav-link">图文消息列表</a></li>
            <li class="nav-item"><a href="#" class="nav-link active" @click="add()">修改图文消息</a></li>
        </ul>
        <form action="/news/news_reply/{{$news_reply['id']}}" method="post">
            <div class="card-body card-body-contrast">
                @csrf
                @method('PUT')
                {!! $view !!}
                <div class="row" id="news">
                    {{--<h2>@{{ active }}</h2>--}}
                    <div class="col-sm-4">
                        <div class="news">
                            <div class="first" v-for="(v,k) in news" v-if="k == 0">
                                <img :src="v.picurl" alt="">
                                <p>@{{ v.title }}</p>
                                <div class="edit">
                                    <button class="btn btn-secondary" type="button" @click="edit(v)">编辑</button>
                                    <button class="btn btn-secondary" type="button" @click="del(k)">删除</button>
                                    <button class="btn btn-secondary" type="button" @click="next(k)">下移
                                    </button>
                                </div>
                            </div>
                            <div class="item" v-for="(v,k) in news" v-if="k > 0">
                                <img :src="v.picurl" alt="">
                                <p>@{{ v.title }}</p>
                                <div class="edit">
                                    <button class="btn btn-secondary" type="button" @click="edit(v)">编辑</button>
                                    <button class="btn btn-secondary" type="button" @click="del(k)">删除</button>
                                    <button class="btn btn-secondary" type="button" @click="prev(k)">上移
                                    </button>
                                    <button class="btn btn-secondary" type="button" @click="next(k)"
                                    >下移
                                    </button>
                                </div>
                            </div>
                            <div class="pt-2" v-if="news.length < 8">
                                <button class="btn btn-secondary btn-block" type="button" @click="add()">添加图文</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <div class="form-group row">
                            <label for="inputSmall" class="col-12 col-sm-3 col-form-label text-sm-right">标题</label>
                            <div class="col-12 col-sm-8 col-lg-6">
                                <input id="inputSmall" type="text" v-model="active.title"
                                       class="form-control form-control-sm">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputSmall" class="col-12 col-sm-3 col-form-label text-sm-right">描述</label>
                            <div class="col-12 col-sm-8 col-lg-6">
                                <textarea class="form-control-sm form-control" id="" cols="30" rows="4"
                                          style="resize: none;">@{{ active.discription }}</textarea>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputSmall" class="col-12 col-sm-3 col-form-label text-sm-right">缩略图</label>
                            <div class="col-sm-8">
                                <div class="input-group mb-1">
                                    <input class="form-control  form-control-sm" readonly="" v-model="active.picurl">
                                    <div class="input-group-append">
                                        <button @click="upImagePc()" class="btn btn-secondary" type="button">单图上传
                                        </button>
                                    </div>
                                </div>
                                <div style="display: inline-block;position: relative;">
                                    <img :src="active.picurl" class="img-responsive img-thumbnail" width="150">
                                    <em class="close" style="position: absolute;top: 3px;right: 8px;" title="删除这张图片"
                                        onclick="removeImg(this)">×</em>
                                </div>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="inputSmall" class="col-12 col-sm-3 col-form-label text-sm-right">链接地址</label>
                            <div class="col-12 col-sm-8 col-lg-6">
                                <input id="inputSmall" type="text" v-model="active.url"
                                       class="form-control form-control-sm">
                            </div>
                        </div>
                        <textarea name="data" hidden>@{{ news }}</textarea>
                    </div>
                </div>

            </div>
            <div class="card-footer text-muted">
                <button class="btn btn-primary offset-sm-2">保存提交</button>
            </div>
        </form>
    </div>
@endsection

@section('script')
    <script>
        require(['vue','hdjs'], function (vue,hdjs) {
            new vue({
                el: '#news',
                data: {
                    news: {!! $news_reply['data'] !!},
                    active: {},
                },
                methods: {
                    upImagePc() {
                        var This = this;
                        hdjs.image(function (images) {
                            //将active的picurl的值改成返回来的图片地址
                            This.active.picurl = images[0];
                        })
                    },
                    //添加图文
                    add() {
                        if (this.news.length < 8) {
                            var item = {
                                title: '后盾人',
                                discription: '描述',
                                picurl: '{{asset("img/4041.jpg")}}',
                                url: 'http://www.houdunren.com'
                            };
                            this.news.push(item);
                            this.edit(item);
                        }
                    },
                    // 删除图文
                    del(k) {
                        this.news.splice(k, 1);
                    },
                    //编辑当前图文
                    edit(v) {
                        this.active = v;
                    },
                    //上移
                    prev(k) {
//获取当前被点击的需要移动的元素
                        var item = this.news[k];
                        //将当前的元素和下面一个元素换位置
                        this.news.splice(k, 1, this.news[k - 1]);
                        this.news.splice(k - 1, 1, item)
                    },
                    // 下移
                    next(k) {
                        //获取当前被点击的需要移动的元素
                        var item = this.news[k];
                        //将当前的元素和下面一个元素换位置
                        this.news.splice(k, 1, this.news[k + 1]);
                        this.news.splice(k + 1, 1, item)
                    }
                }
            })
        })
    </script>
@endsection





